<template>
  <MainContent>
    <DataBoard :list="list" :cardStyle="{ padding: '12px', fontSize: '12px' }" @cardClick="cardClick">
      <template #header="scope">
        <DynamicIcon :icon="(scope.data.header as any)['icon'] ? (scope.data.header as any)['icon'] : 'ChatLineRound'">
        </DynamicIcon>
        {{ scope.data.header.title }}
      </template>
    </DataBoard>
  </MainContent>
</template>

<script setup lang="ts">
import {
  DataBoard,
  DynamicIcon,
  type DataBoardInfo,
  type DataBoardInfoItem
} from 'hippo-module-core'
import { ref } from 'vue'

const list = ref([
  {
    id: 'fdsafsadf',
    width: 250,
    header: {
      lineColor: '#39bada',
      title: '未开始',
      icon: 'SwitchButton'
    },
    items: [
      {
        id: 'fdsfsdf',
        content:
          'Background Intelligent Transfer Service 服务的启动类型从 自动启动 更改为 按需启动。🔖✨',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsdfsadffsdf',
        content:
          '💕😘删除 URL 组0xFE00000E20000010。状态0x0。用户 LOCAL SERVICE \Device\HarddiskVolume3\Windows\System32\svchost.exe0x11E4可执行文件路径的进程 ID',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsadfdf',
        content: '对api接口进行大量的分析与规划🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsfsdadfdf',
        content:
          '在 TCP 网络上检测出有重复名称。 发送消息的计算机的 IP 地址在数据中。 请在命令窗口中使用 nbtstat -n 来查看哪个名称冲突。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsaadfdf',
        content:
          '时间服务正在使用引用 ID 为 1213185300 的时间源 time.windows.com,0x9 (ntp.m|0x9|0.0.0.0:123->20.189.79.72:123) 同步系统时间。当前本地层次编号为 4。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsaddfdff',
        content:
          '时间提供程序“VMICTimeProvider”指示，当前的硬件和运行环境不受支持并且已停止。对于非 HyperV 来宾环境中的 VMICTimeProvider，这是正常现象。对于当前操作环境中的当前提供程序，这可能也是正常现象。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfdsfsadfdff',
        content: '名称的名称解析wpad在未响应任何配置的 DNS 服务器后超时。客户端 PID 29232.🌈🍭',
        date: '2023-9-1 18:58:59'
      }
    ]
  },
  {
    id: 'fdsafffsd3ffsdafsadf',
    width: 300,
    header: {
      color: '#000',
      lineColor: '#0d7b34',
      backgroundColor: '#d5fde3',
      title: '已计划',
      icon: 'MessageBox'
    },
    items: []
  },
  {
    id: 'fdsafdafa3safdf',
    width: 280,
    header: {
      color: '#000',
      lineColor: '#d8c70d',
      backgroundColor: '#fdfad5',
      title: '已立项'
    },
    items: [
      {
        id: 'fdsfsdf',
        content:
          'Background Intelligent Transfer Service 服务的启动类型从 自动启动 更改为 按需启动。🔖✨',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsdfsadffsdf',
        content:
          '💕😘删除 URL 组0xFE00000E20000010。状态0x0。用户 LOCAL SERVICE \Device\HarddiskVolume3\Windows\System32\svchost.exe0x11E4可执行文件路径的进程 ID',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsadfdf',
        content: '对api接口进行大量的分析与规划🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsfsdadfdf',
        content:
          '在 TCP 网络上检测出有重复名称。 发送消息的计算机的 IP 地址在数据中。 请在命令窗口中使用 nbtstat -n 来查看哪个名称冲突。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsaadfdf',
        content:
          '时间服务正在使用引用 ID 为 1213185300 的时间源 time.windows.com,0x9 (ntp.m|0x9|0.0.0.0:123->20.189.79.72:123) 同步系统时间。当前本地层次编号为 4。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsaddfdff',
        content:
          '时间提供程序“VMICTimeProvider”指示，当前的硬件和运行环境不受支持并且已停止。对于非 HyperV 来宾环境中的 VMICTimeProvider，这是正常现象。对于当前操作环境中的当前提供程序，这可能也是正常现象。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfdsfsadfdff',
        content: '名称的名称解析wpad在未响应任何配置的 DNS 服务器后超时。客户端 PID 29232.🌈🍭',
        date: '2023-9-1 18:58:59'
      }
    ]
  },
  {
    id: 'fdsaffsfsdf654adf',
    width: 250,
    header: {
      color: '#000',
      lineColor: '#d21766',
      backgroundColor: '#fecae0',
      title: '研发中'
    },
    items: [
      {
        id: 'fdsfsdf',
        content:
          'Background Intelligent Transfer Service 服务的启动类型从 自动启动 更改为 按需启动。🔖✨',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsdfsadffsdf',
        content:
          '💕😘删除 URL 组0xFE00000E20000010。状态0x0。用户 LOCAL SERVICE \Device\HarddiskVolume3\Windows\System32\svchost.exe0x11E4可执行文件路径的进程 ID',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsadfdf',
        content: '对api接口进行大量的分析与规划🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsfsdadfdf',
        content:
          '在 TCP 网络上检测出有重复名称。 发送消息的计算机的 IP 地址在数据中。 请在命令窗口中使用 nbtstat -n 来查看哪个名称冲突。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsaadfdf',
        content:
          '时间服务正在使用引用 ID 为 1213185300 的时间源 time.windows.com,0x9 (ntp.m|0x9|0.0.0.0:123->20.189.79.72:123) 同步系统时间。当前本地层次编号为 4。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsaddfdff',
        content:
          '时间提供程序“VMICTimeProvider”指示，当前的硬件和运行环境不受支持并且已停止。对于非 HyperV 来宾环境中的 VMICTimeProvider，这是正常现象。对于当前操作环境中的当前提供程序，这可能也是正常现象。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfdsfsadfdff',
        content: '名称的名称解析wpad在未响应任何配置的 DNS 服务器后超时。客户端 PID 29232.🌈🍭',
        date: '2023-9-1 18:58:59'
      }
    ]
  },
  {
    id: 'fdsafsh346gdfsgasfdsaadf',
    width: 250,
    header: {
      color: '#000',
      lineColor: '#d217d0',
      backgroundColor: '#fcd1fb',
      title: '研发完毕'
    },
    items: [
      {
        id: 'fdsfsdf',
        content:
          'Background Intelligent Transfer Service 服务的启动类型从 自动启动 更改为 按需启动。🔖✨',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsdfsadffsdf',
        content:
          '💕😘删除 URL 组0xFE00000E20000010。状态0x0。用户 LOCAL SERVICE \Device\HarddiskVolume3\Windows\System32\svchost.exe0x11E4可执行文件路径的进程 ID',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsadfdf',
        content: '对api接口进行大量的分析与规划🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsfsdadfdf',
        content:
          '在 TCP 网络上检测出有重复名称。 发送消息的计算机的 IP 地址在数据中。 请在命令窗口中使用 nbtstat -n 来查看哪个名称冲突。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsaadfdf',
        content:
          '时间服务正在使用引用 ID 为 1213185300 的时间源 time.windows.com,0x9 (ntp.m|0x9|0.0.0.0:123->20.189.79.72:123) 同步系统时间。当前本地层次编号为 4。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsaddfdff',
        content:
          '时间提供程序“VMICTimeProvider”指示，当前的硬件和运行环境不受支持并且已停止。对于非 HyperV 来宾环境中的 VMICTimeProvider，这是正常现象。对于当前操作环境中的当前提供程序，这可能也是正常现象。🌈🍭',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfdsfsadfdff',
        content: '名称的名称解析wpad在未响应任何配置的 DNS 服务器后超时。客户端 PID 29232.🌈🍭',
        date: '2023-9-1 18:58:59'
      }
    ]
  },
  {
    id: 'fdsafsfas534fsafaafdf',
    width: 250,
    header: {
      color: '#000',
      lineColor: '#0aa5ab',
      backgroundColor: '#d1fafc',
      title: '测试中'
    },
    items: [
      {
        id: 'fdsfsdf',
        content:
          'Background Intelligent Transfer Service 服务的启动类型从 自动启动 更改为 按需启动。🔖✨',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsdfsadffsdf',
        content:
          '💕😘删除 URL 组0xFE00000E20000010。状态0x0。用户 LOCAL SERVICE \Device\HarddiskVolume3\Windows\System32\svchost.exe0x11E4可执行文件路径的进程 ID',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsfsadfdf',
        content: '对api接口进行大量的分析与规划🌈🍭',
        date: '2023-9-1 18:58:59'
      }
    ]
  },
  {
    id: '2fdsa34fsfas53fdsa4fsaafaafdf',
    width: 350,
    header: {
      color: '#000',
      lineColor: '#b1430d',
      backgroundColor: '#f9cdb8',
      title: '测试完毕'
    },
    items: [
      {
        id: 'fdsfsdf',
        content:
          'Background Intelligent Transfer Service 服务的启动类型从 自动启动 更改为 按需启动。🔖✨',
        date: '2023-9-1 18:58:59'
      }
    ]
  },
  {
    id: 'fd34fsfas5dfa3fdsa4fsaafaafdf',
    width: 350,
    header: {
      color: '#000',
      lineColor: '#7bad11',
      backgroundColor: '#eafbc6',
      title: '产品上线'
    },
    items: [
      {
        id: 'fdsfsdf',
        content:
          'Background Intelligent Transfer Service 服务的启动类型从 自动启动 更改为 按需启动。🔖✨',
        date: '2023-9-1 18:58:59'
      },
      {
        id: 'fdsfsdfsadffsdf',
        content:
          '💕😘删除 URL 组0xFE00000E20000010。状态0x0。用户 LOCAL SERVICE \Device\HarddiskVolume3\Windows\System32\svchost.exe0x11E4可执行文件路径的进程 ID',
        date: '2023-9-1 18:58:59'
      }
    ]
  }
])

const cardClick = (item: DataBoardInfo, card: DataBoardInfoItem, index: number) => {
  console.log(item)
  console.log(card)
  console.log(index)
}
</script>

<style scoped lang="scss">
@import './DataBoardDemo.scss';
</style>
